<!DOCTYPE html>
<html>
<head>
  <!-- 页面meta -->
  <meta charset="UTF-8"/>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>青芽医疗管理平台</title>
  <meta name="description" content="数据采集分析系统">
  <meta name="keywords" content="数据采集分析系统">
  <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
  <!-- 引入样式 -->
  <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
  <style>
    .avatar-uploader .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
      border-color: #409EFF;
    }
    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 78px;
      height: 78px;
      line-height: 78px;
      text-align: center;
    }
    .avatar {
      width: 78px;
      height: 78px;
      display: block;
    }
  </style>
</head>
<body class="hold-transition">

<div id="app">
  <div class="filter-container">
    <el-input placeholder="用户名称" style="width: 200px;" class="filter-item" v-model="pagination.queryName"></el-input>
    <el-button @click="_getUserPage()" class="dalfBut">查询</el-button>
    <el-button type="primary" class="butT" @click="handleAdd()">新建用戶</el-button>
  </div>

  <el-table size="small" current-row-key="userId" :data="list" stripe highlight-current-row>
    <el-table-column type="index" align="center" label="序号"></el-table-column>
    <el-table-column prop="username" label="用户名" align="center"></el-table-column>
    <el-table-column prop="photoUrl" label="头像" align="center">
      <template slot-scope="scope">
        <el-image :src="scope.row.photoUrl" style="width: 100px;height: 100px"></el-image>
      </template>
    </el-table-column>
    <el-table-column prop="name" label="姓名" align="center"></el-table-column>
    <el-table-column prop="age" label="年龄" align="center"></el-table-column>
    <el-table-column prop="sex" label="性别" align="center"></el-table-column>
    <el-table-column prop="formatBirthday" label="出生日期" align="center"></el-table-column>
    <el-table-column prop="phone" label="电话号码" align="center"></el-table-column>
    <el-table-column prop="status" label="状态" align="center"></el-table-column>
    <el-table-column label="操作" align="center" width="300">
      <template slot-scope="scope">
        <el-button type="primary" size="mini" @click="handleUpdate(scope.row)">编辑</el-button>
        <el-button type="success" size="mini" @click="handleUser(scope.row)">分配</el-button>
        <el-button size="mini" type="danger" @click="delUser(scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <div class="pagination-container">
    <el-pagination
            class="pagiantion"
            @current-change="handleCurrentChange"
            :current-page="pagination.currentPage"
            :page-size="pagination.pageSize"
            layout="total, prev, pager, next, jumper"
            :total="pagination.total">
    </el-pagination>
  </div>

  <div class="add-form">
    <el-dialog title="新建用户" :visible.sync="dialogFormVisible"  width="760px" :close-on-click-modal="false">
      <el-form ref="dataAddForm" :model="user"  label-position="right" label-width="100px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="用户名" prop="username">
              <el-input v-model="user.username" @blur="checkAcount()"/>
            </el-form-item>
            <el-form-item label="姓名" prop="name">
              <el-input v-model="user.name"></el-input>
            </el-form-item>
            <el-form-item label="性别" prop="sex">
              <el-radio-group v-model="user.sex">
                <el-radio label="男"></el-radio>
                <el-radio label="女"></el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="出生日期" prop="birthday">
              <el-date-picker v-model="user.birthday" type="date" placeholder="选择日期"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="密码" prop="password">
              <el-input v-model="user.password" type="password"></el-input>
            </el-form-item>
            <el-form-item label="年龄" prop="age">
              <el-input v-model="user.age"></el-input>
            </el-form-item>
            <el-form-item label="电话号码" prop="phone">
              <el-input v-model="user.phone" ></el-input>
            </el-form-item>
            <el-form-item label="状态" prop="user">
              <el-select v-model="user.status" placeholder="请选择">
                <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-form-item label="用户头像" prop="photoUrl">
            <el-upload
                    class="avatar-uploader"
                    action="/user/fileUpload"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload">
              <img v-if="url" :src="url" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="addUser()">确定</el-button>
      </div>
    </el-dialog>
  </div>

  <div class="add-form">
    <el-dialog title="编辑用户" :visible.sync="dialogFormVisible4Edit"  width="760px" :close-on-click-modal="false">
      <el-form ref="dataEditForm" :model="user"  label-position="right" label-width="100px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="用户名" prop="username">
              <el-input v-model="user.username" @blur="checkAcount()"/>
            </el-form-item>
            <el-form-item label="姓名" prop="name">
              <el-input v-model="user.name"></el-input>
            </el-form-item>
            <el-form-item label="性别" prop="sex">
              <el-radio-group v-model="user.sex">
                <el-radio label="男"></el-radio>
                <el-radio label="女"></el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="出生日期" prop="birthday">
              <el-date-picker v-model="user.birthday" type="date" placeholder="选择日期"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="密码" prop="password">
              <el-input v-model="user.password" type="password"></el-input>
            </el-form-item>
            <el-form-item label="年龄" prop="age">
              <el-input v-model="user.age"></el-input>
            </el-form-item>
            <el-form-item label="电话号码" prop="phone">
              <el-input v-model="user.phone" ></el-input>
            </el-form-item>
            <el-form-item label="状态" prop="user">
              <el-select v-model="user.status" placeholder="请选择">
                <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-form-item label="用户头像" prop="photoUrl">
            <el-upload
                    class="avatar-uploader"
                    action="/user/fileUpload"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload">
              <img v-if="url" :src="url" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible4Edit = false">取消</el-button>
        <el-button type="primary" @click="updateUser()">确定</el-button>
      </div>
    </el-dialog>
  </div>

  <div class="add-form">
    <el-dialog title="分配权限" :visible.sync="dialogFormUser" :close-on-click-modal="false">
      <el-table ref="multipleTable" size="small" current-row-key="roleId" :data="roleList" stripe highlight-current-row @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column type="index" align="center" label="序号"></el-table-column>
        <el-table-column prop="roleName" label="角色名称" align="center"></el-table-column>
        <el-table-column prop="roleDescription" label="角色描述" align="center"></el-table-column>
      </el-table>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormUser=false">取消</el-button>
        <el-button type="primary" @click="addUserRole()">提交</el-button>
      </div>
    </el-dialog>
  </div>
</div>

</body>
<!-- 引入组件库 -->
<script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script src="js/axios-0.18.0.js"></script>
<script type="application/javascript">
  var app = new Vue({
    el: '#app',
    data: {
      pagination: {//分页相关模型数据
        currentPage: 1,//当前页码
        pageSize:5,//每页显示的记录数
        total:0,//总记录数
        queryString:null//查询条件
      },
      options: [{value: '上班', label: '上班'}, {value: '休息', label: '休息'}, {value: '离职', label: '离职'}],
      list:[],
      user:{},
      departmentList:[],
      multipleSelection:[],
      dialogFormUser:false,
      dialogFormVisible:false,
      dialogFormVisible4Edit:false,
      selectedRoles:[],
      roleList:[],
      userId:'',
      url:""
    },
    mounted () {
      this.getUserPage();
    },
    methods: {
      //验证用户名不能重复
      checkAcount(){
        axios.post('/user/checkAcount?username='+this.user.username).then(res => {
            if(res.data == 'false'){
              this.$message.error("用户名已存在");
              this.user.username = '';
            }
        });
      },
      //上传成功
      handleAvatarSuccess(res,file,fileList) {
          this.url= "upload/images/"+file.name;
          this.user.photoUrl = this.url;
      },
      //上传前准备
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg' || 'image/webp';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },
      addUserRole(){
        axios.post('/user/addUserRole?userId='+this.userId+"&roleList="+this.multipleSelection).then(res => {
          if(res.data){
            this.dialogFormUser=false;
            this.$message({
              type:'success',
              message:"分配成功"
            });
          }else{
            this.$message.error("分配失败");
          }
        });
      },
      handleSelectionChange(val){
        this.multipleSelection=[];
        val.forEach(e => {
          this.multipleSelection.push(e.roleId);
        })
      },
      handleUser(row){
        this.dialogFormUser=true;
        this.userId=row.userId;
        this.multipleSelection=[];
        axios.get("/role/getUserRole?userId="+row.userId).then((res)=>{
          this.selectedRoles=res.data.userRole;
          this.roleList=res.data.roleList;
          this.selectedRoles.forEach(row => {
            this.$nextTick(function () {
              this.roleList.forEach(p=>{
                if(p.roleId==row.roleId){
                  this.$refs.multipleTable.toggleRowSelection(p,true);
                }
              });
            });
          });
        });
      },
      updateUser(){
        this.$confirm("你确定要修改当前数据吗？","提示",{//确认框
          type:'warning'
        }).then(()=>{
          axios.post("/user/updateUser","user="+JSON.stringify(this.user)).then((res) => {
            if(res){
              this.$message({
                type:'success',
                message:"修改成功"
              });
              //重新进行分页查询
              this.getUserPage();
            }else{
              //执行失败
              this.$message.error("修改失败");
            }
          }).catch((r)=>{
            this.showMessage(r);
          });
        }).catch(()=>{
          this.$message({
            type:'info',
            message:'操作已取消'
          });
        }).finally(() => {
          //不管成功还是失败，都调用分页查询方法
          this.getUserPage();
          //隐藏编辑窗口
          this.dialogFormVisible4Edit = false;
        });
      },
      handleUpdate(row){
        this.dialogFormVisible4Edit=true;
        axios.get("/user/getUserById?id="+row.userId).then((res) => {
          this.user = res.data;
          this.url = res.data.photoUrl;
        });

      },
      delUser(row){
        this.$confirm("你确定要删除当前数据吗？","提示",{//确认框
          type:'warning'
        }).then(()=>{
          //用户点击确定按钮，发送ajax请求，将检查项ID提交到Controller进行处理
          axios.post("/user/delUser","user="+JSON.stringify(row)).then((res) => {
            if(res.data){
              //执行成功
              //弹出成功提示信息
              this.$message({
                type:'success',
                message:"删除成功"
              });
              //重新进行分页查询
              this.getUserPage();
            }else{
              //执行失败
              this.$message.error("删除失败");
            }
          }).catch((r)=>{
            this.showMessage(r);
          });
        }).catch(()=>{
          this.$message({
            type:'info',
            message:'操作已取消'
          });
        });
      },

      _getUserPage(){
        this.pagination.currentPage=1;
        this.getUserPage();
      },
      getUserPage() {
        //发送ajax请求，提交分页相关请求参数（页码、每页显示记录数、查询条件）
        var queryPageBean = {
          currentPage:this.pagination.currentPage,
          pageSize:this.pagination.pageSize,
          queryTerm: {username:this.pagination.queryName}
        };
        axios.post("/user/getUserPage","queryPageBean="+JSON.stringify(queryPageBean)).then((res)=>{
          this.list = res.data.userList;
          this.pagination.total = res.data.total;
        });
      },
      handleCurrentChange(currentPage) {
        //为模型数据赋值（当前页面）
        this.pagination.currentPage = currentPage;
        this.getUserPage();
      },
      handleAdd(){
        this.user={};
        this.url="";
        this.dialogFormVisible=true;
      },
      addUser(){
        axios.post('/user/addUser', "user="+JSON.stringify(this.user)).then(res=>{
          this.dialogFormVisible=false;
          if(res){
            this.$message({
              type:'success',
              message:"添加成功"
            });
          }else {
            this.$message.error("添加失败");
          }
          this.getUserPage();
        });
      }
    }
  })
</script>
</html>